<template>
  <div v-loading="loading" class="scroll-main">
    <div style="display: flex; justify-content: space-between; padding: 20px;">
      <div style="color: red">当前订单状态： <span>{{ detailInfo.status }}</span></div>
      <el-button type="primary" @click="showRemarkOrder">备注订单</el-button>
    </div>
    <el-card>
      <CommonList :list-config="baseListConfig" :list="detailInfo.baseList" />
      <CommonList :list-config="receiverListConfig" :list="detailInfo.receiverList" />
      <CommonList :list-config="prodListConfig" :list="detailInfo.proList" />
      <div class="prod-sum-wrap">
        <div>总成本价：<span class="amount-color">{{ `¥${detailInfo.costTotalPrice}` }}</span></div>
        <div style="margin-left: 30px">总结算价： <span class="amount-color">{{ `¥${detailInfo.settlementTotalPrice}` }}</span></div>
      </div>
      <CommonList :list-config="feeListConfig" :list="detailInfo.feeList" />
      <CommonList :list-config="optListConfig" :list="detailInfo.optList" />
    </el-card>
    <CommonDialog
      :visible.sync="remarkDialogVisible"
      :dialog-config="dialogConfig"
      :value="ruleForm"
    />
  </div>
</template>

<script>
import CommonList from '../../common/commonList/CommonList'
import CommonDialog from '../../common/commonDialog/CommonDialog'

import getBaseListParams from './getBaseListParams'
import getFeeListParams from './getFeeListParams'
import getProListParams from './getProListParams'
import getOptListParams from './getOptListParams'
import getReceiverListParams from './getReceiverListParams'

import getRemarkDialogParams from '../../common/getRemarkDailogParams'

import { getDetail } from '../../../../../api/rock/orders/doorList'

export default {
  name: 'DoorDetail',
  components: {
    CommonList,
    CommonDialog
  },
  mixins: [
    getBaseListParams,
    getReceiverListParams,
    getOptListParams,
    getFeeListParams,
    getReceiverListParams,
    getProListParams,
    getRemarkDialogParams
  ],
  data() {
    return {
      detailInfo: {
        baseList: [],
        optList: [],
        feeList: [],
        proList: [],
        receiverList: [],
        status: 0,
        costTotalPrice: 0,
        settlementTotalPrice: 0
      },
      remarkDialogVisible: false,
      id: '',
      loading: false
    }
  },
  mounted() {
    const { id } = this.$route.query
    this.id = id
    this.query(id)
  },
  methods: {
    query(id) {
      this.loading = true
      getDetail({ goodsOptNo: id }).then(res => {
        const resultData = res.data
        const { code, message, data } = resultData
        if (code === 0) {
          const {
            distributionOptInfoList,
            distributionGoodsInfoList,
            distributionNo,
            serialNumber,
            deliveryType,
            deliveryNo,
            channel,
            orderType,
            receiver,
            mobile,
            zipCode,
            receAddress,
            goodsTotalPrice,
            freightPrice,
            orderTotalPrice,
            payablePrice
          } = data
          const baseList = [{ distributionNo, serialNumber, deliveryNo, deliveryType, channel, orderType }]
          const receiverList = [{ receiver, mobile, zipCode, receAddress }]
          const feeList = [{ goodsTotalPrice, freightPrice, orderTotalPrice, payablePrice }]

          let costTotalPrice = 0
          let settlementTotalPrice = 0
          distributionGoodsInfoList.forEach(item => {
            costTotalPrice += Number(item.costTotalPrice).toFixed(2)
            settlementTotalPrice += Number(item.settlementTotalPrice).toFixed(2)
          })
          costTotalPrice = 20
          console.log('costTotalPrice====', costTotalPrice)

          const detailInfo = { costTotalPrice, settlementTotalPrice, baseList, receiverList, feeList, optList: distributionOptInfoList, proList: distributionGoodsInfoList }
          this.detailInfo = detailInfo
        } else {
          this.$message(message)
        }
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
    showRemarkOrder() {
      this.remarkDialogVisible = true
    }
  }
}
</script>

<style scoped>
    .scroll-main {
        height: calc(100vh - 113px);
        overflow: auto;
    }

    .prod-sum-wrap {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
        background: rgba(249, 250, 252, 1);
        margin-top: 14px;
        border-color: rgba(228, 228, 228, 1);
        font-size: 16px;
    }
    .amount-color{
        color: red
    }
</style>
